<template>
  <div class="wallpaper-generator">
    <a-card class="generator-card" :bordered="false">
      <template #title>
        <div class="title">
          <span>🌈 随机壁纸生成器 🖼️</span>
        </div>
      </template>

      <div class="controls">
        <a-form layout="vertical">
          <a-form-item label="设备类型 📱💻">
            <a-select v-model:value="params.method" placeholder="选择设备类型">
              <a-select-option value="pc">电脑端 💻</a-select-option>
              <a-select-option value="mobile">手机端 📱</a-select-option>
              <a-select-option value="zsy">自动判断 🔄</a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item label="壁纸分类 🏷️">
            <a-radio-group v-model:value="params.lx" button-style="solid">
              <a-radio-button value="suiji">随机 🎲</a-radio-button>
              <a-radio-button value="dongman">动漫 🎭</a-radio-button>
              <a-radio-button value="fengjing">风景 🏞️</a-radio-button>
              <a-radio-button value="meizi">美女 👩</a-radio-button>
            </a-radio-group>
          </a-form-item>

          <a-form-item>
            <a-button type="primary" @click="generateWallpaper" :loading="loading" block>
              生成新壁纸 🖼️
            </a-button>
          </a-form-item>
        </a-form>
      </div>

      <div class="wallpaper-container" v-if="wallpaperData">
        <div class="image-wrapper">
          <a-skeleton active :loading="loading" :paragraph="{ rows: 10 }" v-if="loading"></a-skeleton>
          <img
            v-else
            :src="wallpaperData.imgurl"
            alt="生成的壁纸"
            class="generated-wallpaper"
            @load="imageLoaded = true"
            v-show="imageLoaded"
          />
          <div class="image-info" v-if="!loading && imageLoaded">
            <a-tag color="blue">{{ wallpaperData.width }}x{{ wallpaperData.height }}</a-tag>
            <a-tag color="green">{{ getCategoryName(params.lx) }}</a-tag>
            <a-tag color="purple">{{ getDeviceName(params.method) }}</a-tag>
          </div>
        </div>

        <a-divider>
          <span class="divider-text">🔗 壁纸链接 🔗</span>
        </a-divider>

        <div class="url-container">
          <a-input-group compact>
            <a-input
              v-model:value="wallpaperData.imgurl"
              readonly
              class="url-input"
            />
            <a-tooltip title="复制链接">
              <a-button @click="copyUrl" type="primary">
                <template #icon><copy-outlined /></template>
              </a-button>
            </a-tooltip>
          </a-input-group>
        </div>

        <div class="action-buttons">
          <a-button type="primary" @click="downloadWallpaper" :disabled="loading || !imageLoaded">
            <template #icon><download-outlined /></template>
            下载壁纸
          </a-button>
          <a-button @click="shareWallpaper" :disabled="loading || !imageLoaded">
            <template #icon><share-alt-outlined /></template>
            分享壁纸
          </a-button>
        </div>
      </div>

      <div class="empty-state" v-else>
        <a-empty description="点击生成按钮获取壁纸" />
      </div>
    </a-card>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue';
import { message } from 'ant-design-vue';
import axios from 'axios';
import { CopyOutlined, DownloadOutlined, ShareAltOutlined } from '@ant-design/icons-vue';

// 定义参数和状态
const params = reactive({
  method: 'pc',
  lx: 'suiji',
  format: 'json'
});

const wallpaperData = ref(null);
const loading = ref(false);
const imageLoaded = ref(false);

// 获取分类名称
const getCategoryName = (lx) => {
  const categories = {
    'suiji': '随机壁纸',
    'dongman': '动漫壁纸',
    'fengjing': '风景壁纸',
    'meizi': '美女壁纸'
  };
  return categories[lx] || '随机壁纸';
};

// 获取设备名称
const getDeviceName = (method) => {
  const devices = {
    'pc': '电脑壁纸',
    'mobile': '手机壁纸',
    'zsy': '自适应壁纸'
  };
  return devices[method] || '电脑壁纸';
};

// 生成壁纸方法
const generateWallpaper = async () => {
  loading.value = true;
  imageLoaded.value = false;

  try {
    const response = await axios.get('https://api.btstu.cn/sjbz/api.php', {
      params: params
    });

    wallpaperData.value = response.data;
    message.success('壁纸生成成功 🎉');
  } catch (error) {
    console.error('获取壁纸失败:', error);
    message.error('获取壁纸失败，请重试 😢');
  } finally {
    loading.value = false;
  }
};

// 复制URL方法
const copyUrl = () => {
  if (wallpaperData.value && wallpaperData.value.imgurl) {
    navigator.clipboard.writeText(wallpaperData.value.imgurl)
      .then(() => {
        message.success('链接已复制到剪贴板 📋');
      })
      .catch(() => {
        message.error('复制失败，请手动复制 ❌');
      });
  }
};

// 下载壁纸方法
const downloadWallpaper = () => {
  if (wallpaperData.value && wallpaperData.value.imgurl) {
    const link = document.createElement('a');
    link.href = wallpaperData.value.imgurl;
    link.download = `wallpaper-${Date.now()}.jpg`;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    message.success('壁纸下载已开始 ⬇️');
  }
};

// 分享壁纸方法
const shareWallpaper = () => {
  if (wallpaperData.value && wallpaperData.value.imgurl) {
    if (navigator.share) {
      navigator.share({
        title: '分享壁纸',
        text: '看看这张精美的壁纸！',
        url: wallpaperData.value.imgurl,
      })
        .then(() => message.success('分享成功 🎉'))
        .catch((error) => {
          console.error('分享失败:', error);
          message.error('分享失败 ❌');
        });
    } else {
      copyUrl();
      message.info('您的浏览器不支持分享功能，已复制链接 🔗');
    }
  }
};

// 初始加载时生成一张壁纸
generateWallpaper();
</script>

<style scoped>
.wallpaper-generator {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
}

.generator-card {
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  background: linear-gradient(to bottom, #ffffff, #f9f9f9);
}

.title {
  font-size: 1.8rem;
  text-align: center;
  background: linear-gradient(45deg, #ff7676, #5662f6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: bold;
  padding: 8px 0;
}

.controls {
  margin-bottom: 24px;
  background-color: rgba(245, 245, 245, 0.6);
  padding: 16px;
  border-radius: 12px;
}

.wallpaper-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
}

.image-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.generated-wallpaper {
  max-width: 100%;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  transition: all 0.4s ease;
}

.generated-wallpaper:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.image-info {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}

.divider-text {
  font-size: 14px;
  color: #666;
}

.url-container {
  margin: 0 auto;
  width: 100%;
}

.url-input {
  font-family: monospace;
  color: #1890ff;
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 8px;
}

.empty-state {
  padding: 60px 0;
}

@media (max-width: 576px) {
  .wallpaper-generator {
    padding: 10px;
  }

  .title {
    font-size: 1.4rem;
  }

  .action-buttons {
    flex-direction: column;
    gap: 8px;
  }
}
</style>
